<!--
 * @Author: 18222335065 2369811390@qq.com
 * @Date: 2022-10-12 14:23:18
 * @LastEditors: 18222335065 2369811390@qq.com
 * @LastEditTime: 2022-10-17 11:32:54
 * @FilePath: \hey\HeyTea_project\HeyTea-ui\src\pages\admin\account\Custome.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div>
    <!-- 第一行 第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行-->
    <div class="header">
      <el-form :inline="true" :model="params" class="demo-form-inline">
        <el-date-picker
          v-model="value2"
          value-format="timestamp"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        />
        <el-form-item>
          <el-select
            v-model="params.type"
            clearable
            placeholder="请选择类型"
          >
            <el-option label="充值" value="充值" />
            <el-option label="收益" value="收益" />
            <el-option label="提现" value="提现" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="params.status" clearable placeholder="请选择状态">
            <el-option label="正常" value="正常" />
            <el-option label="未审核" value="未审核" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第一行！ 第一行！第一行！第一行！第一行！第一行！第一行！第一行！第一行！第一行！第一行！第一行！第一行！第一行！第一行！-->
    <div class="border">
      <el-table :data="accountData" style="width: 100%">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="transferMoney" label="交易金额" />
        <el-table-column prop="transferTime" label="交易时间">
          <template slot-scope="scope">
            {{ scope.row.transferTime | fmtDate }}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="交易类型" />
        <!-- <el-table-column prop="status" label="状态"> </el-table-column> -->
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status === '正常'"
              type="success"
            >正常</el-tag>
            <el-tag v-else type="danger">未审核</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" />
      </el-table>
    </div>

    <!-- 第san行 第san行第san行第san行第san行第san行第san行第san行第san行第san行第san行第san行第san行第san行第san行第san行-->
    <div class="page">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[2, 5, 10, 20, 30, 50]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 第san行！ 第san行第san行第san行第san行第san行第san行第san行第san行第san行第san行第san行第san行第san行第san行第san行-->
  </div>
</template>
<script>
import { get } from '@/utils/request'

export default {
  data() {
    return {
      // 表单对象 和 分页数据
      params: {
        page: 1,
        pageSize: 10
      },
      accountData: [],
      total: 0,
      ruleForm: [],
      name: {},
      // 时间查询
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: [],
      id: '',
      customList: []
    }
  },
  // computed:{
  //   ...mapGetters(['customes'])
  // },
  watch: {
    params: {
      handler() {
        this.getCusAccount()
      },
      deep: true
    }
  },
  created() {
    this.getCusAccount()
    this.getAll()
    this.getusername()
  },

  methods: {
    // 拿账单
    async getCusAccount() {
      // this.params.userId=this.id
      for (const key in this.params) {
        // key--属性名
        // this.params[key] --属性值
        if (!this.params[key]) {
          delete this.params[key]
        }
      }
      if (this.value2) {
        this.params.beginTime = this.value2[0]
        this.params.endTime = this.value2[1]
      } else {
        this.params.beginTime = null
        this.params.endTime = null
      }
      const res = await get('/account/pageQuerySystemAccount', this.params)
      console.log(res, 'accounts!')
      this.accountData = res.data.list
      this.total = res.data.total
      // this.value2=res.data.list.transferTime
    },
    // 所有账单信息
    async getAll() {
      const res = await get('/account/pageQuerySystemAccount', { page: 1, pageSize: 1000 })

      this.accounts = res.data.list
    },

    // 页码条数发生改变的方法 默认参数pageSize
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize
      this.params.page = 1
      this.getCusAccount()
      // console.log(params.page,params.pageSize,'分页');
    },
    // 查询
    onSearch() {
      this.params.page = 1
      this.getCusAccount()
    },
    // 当前页码发生改变触发的方法 默认参数page
    handleCurrentChange(page) {
      this.params.page = page
      this.getCusAccount()
      // console.log(this.value2,'v2');
    }
  }
}
</script>

